/******** 很暴力的方式监听el-table class的变化并执行宽度设置,来解决滚动条出现后表格线条无法对齐的问题 ********/
export default (Vue) => {
    return Vue.directive('tableAligning', {
        // el-table el-table--fit el-table--border  el-table--enable-row-hover el-table--enable-row-transition el-table--scrollable-y
        // el-table el-table--fit el-table--border el-table--enable-row-hover el-table--enable-row-transition
        bind(el) {
           /* // 获取原始表格宽度
            const elWidth = el.style.width || el.clientWidth
            // 正则匹配 px宽度 百分比宽度 数字宽度
            const matchArry = elWidth.toString().match(/((\d+\.\d+)|(\d+))|((\w+)|%)/g)
            // 修改一下值
            const elChangeWidth = matchArry[0] - 0.01 + (matchArry[1] || 'px')
            // console.log(elWidth, elChangeWidth)
            let options = {
                attributes: true,//观察node对象的属性
                attributeFilter: ['class']//只观察class属性
            }
            window.m_b_tableAligning = new MutationObserver(function(mutationRecord, observer) {
                // console.log(observer)
                // 收起的时候执行
                if (mutationRecord[0].target.className.indexOf('el-table--scrollable-y') < 0) {
                    // 设置一下修改 让表格重绘一下
                    el.style.width = elChangeWidth
                    setTimeout(() => {
                        el.style.width = elWidth
                    }, 50)
                }
            })
            window.m_b_tableAligning.observe(el, options)*/
           console.warn('table-aligning:指令已废弃！(使用el-table的doLayout方法)', el)
        },
        /*unbind() {
            // 解绑监听
            // 如果被观察的元素被从DOM中移除，然后被浏览器的垃圾回收机制释放，此MutationObserver将同样被删除。所以并不需要再销毁了
            //window.m_b_tableAligning.disconnect()
        }*/
    })
}
